<!DOCTYPE html>
<html>
  <head>
    <title>轮播图</title>
    <style>
      /* 轮播图容器样式 */
      #slider {
        width: 500px;
        height: 300px;
        overflow: hidden;
        position: relative;
      }
      
      /* 图片样式 */
      #slider img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 1s ease-in-out;
      }
      
      /* 显示当前图片的样式 */
      #slider img.active {
        opacity: 1;
      }
      
      /* 控制按钮样式 */
      .control {
        display: inline-block;
        width: 20px;
        height: 20px;
        background-color: #ccc;
        border-radius: 50%;
        margin: 0 10px;
        cursor: pointer;
      }
      
      /* 显示当前按钮的样式 */
      .control.active {
        background-color: #333;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="slider">
      <img src="/pink/js_/高级js/画江湖/姬如雪.png" alt="图片1" class="active">
      <img src="/pink/js_/高级js/画江湖/幻音阁.png" alt="图片2">
      <img src="/pink/js_/高级js/画江湖/骆小北.png" alt="图片3">
    </div>
    <div id="controls">
      <span class="control active" onclick="changeSlide(1)"></span>
      <span class="control" onclick="changeSlide(2)"></span>
      <span class="control" onclick="changeSlide(3)"></span>
    </div>
    <script>
      // 获取轮播图容器和所有图片
      const slider = document.querySelector("#slider");
      const slides = slider.querySelectorAll("img");
      // 获取控制按钮容器和所有按钮
      const controls = document.querySelector("#controls");
      const buttons = controls.querySelectorAll(".control");
      // 当前显示的图片和按钮的索引
      let currentSlide = 0;
      // 自动切换图片的时间间隔（毫秒）
      const intervalTime = 5000;
      
      // 初始化轮播图
      function initSlider() {
        // 显示第一张图片和第一个按钮
        slides[currentSlide].classList.add("active");
        buttons[currentSlide].classList.add("active");
        // 启动自动切换
        setInterval(() => {
          changeSlide(currentSlide + 1);
        }, intervalTime);
      }
      
      // 切换图片
      function changeSlide(index) {
        // 防止越界
        if (index < 0) {
          index = slides.length - 1;
        } else if (index >= slides.length) {
          index = 0;
        }
        // 隐藏当前图片和按钮
        slides[currentSlide].classList.remove("active");
        buttons[currentSlide].classList.remove("active");
        // 显示下一张图片和按钮
        slides[index].classList.add("active");
        buttons[index].classList.add("active");
        // 更新当前索引
        currentSlide = index;
      }
      
      // 初始化轮播图
      initSlider();
    </script>
  </body>
</html>
